<template>
  <div class="designer-sidebar">
    <div class="component-panel">
      <el-tabs v-model="sidebarActiveTab" class="sidebar-tabs">
        <el-tab-pane :label="t('formDesigner.componentPanel.components')" name="components">
          <div class="component-categories">
            <!-- 基础组件 -->
            <div class="component-category">
              <div class="category-title">{{ t('formDesigner.componentPanel.basicFormComponents') }}</div>
              <div class="component-list">
                <div
                  v-for="component in basicComponents"
                  :key="component.type"
                  class="component-item"
                  draggable="true"
                  @dragstart="handleDragStart($event, component)"
                >
                  <el-icon><component :is="component.icon" /></el-icon>
                  <span>{{ component.label }}</span>
                </div>
              </div>
            </div>

            <div class="component-category">
              <div class="category-title">{{ t('formDesigner.componentPanel.contentDisplayComponents') }}</div>
              <div class="component-list">
                <div
                  v-for="component in showComponents"
                  :key="component.type"
                  class="component-item"
                  draggable="true"
                  @dragstart="handleDragStart($event, component)"
                >
                  <el-icon><component :is="component.icon" /></el-icon>
                  <span>{{ component.label }}</span>
                </div>
              </div>
            </div>

            <!-- 布局组件 -->
            <div class="component-category">
              <div class="category-title">{{ t('formDesigner.componentPanel.layoutComponents') }}</div>
              <div class="component-list">
                <div
                  v-for="component in layoutComponents"
                  :key="component.type"
                  class="component-item"
                  draggable="true"
                  @dragstart="handleDragStart($event, component)"
                >
                  <el-icon><component :is="component.icon" /></el-icon>
                  <span>{{ component.label }}</span>
                </div>
              </div>
            </div>
            <div class="todo-components" >
              <span class="todo-title">{{ t('formDesigner.componentPanel.todoComponentsList') }}</span>
              <span class="todo-content">{{ t('formDesigner.componentPanel.todoComponents') }}</span>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane :label="t('formDesigner.componentPanel.outline')" name="outline">
          <div class="outline-panel">
            <div v-if="formItems.length === 0" class="outline-empty">
              <el-empty :description="t('formDesigner.componentPanel.noFormItems')" :image-size="60" />
            </div>
            <div v-else class="outline-list">
              <template v-for="(item, index) in formItems" :key="item.key">
                <!-- 普通组件 -->
                <div
                  v-if="item.type !== 'grid'"
                  class="outline-item"
                  :class="{ active: selectedIndex === index }"
                  @click="$emit('selectItem', index)"
                >
                  <div class="outline-item-content">
                    <el-icon class="outline-item-icon">
                      <component :is="getComponentIcon(item.type)" />
                    </el-icon>
                    <div class="outline-item-info">
                      <div class="outline-item-label">{{ item.label }}</div>
                      <div class="outline-item-field">{{ item.field }}</div>
                    </div>
                    <div class="outline-item-type">
                      {{ getComponentTypeName(item.type) }}
                    </div>
                  </div>
                  <div class="outline-item-actions">
                    <el-button
                      size="small"
                      text
                      :icon="markRaw(DocumentCopy)"
                      @click.stop="$emit('copyItem', index)"
                    />
                    <el-button
                      size="small"
                      text
                      type="danger"
                      :icon="markRaw(Delete)"
                      @click.stop="$emit('deleteItem', index)"
                    />
                  </div>
                </div>

                <!-- 栅格布局组件 -->
                <div v-else class="outline-grid-container">
                  <!-- 栅格布局本身 -->
                  <div
                    class="outline-item outline-grid-item"
                    :class="{ active: selectedIndex === index }"
                    @click="$emit('selectItem', index)"
                  >
                    <div class="outline-item-content">
                      <el-icon class="outline-item-icon">
                        <component :is="getComponentIcon(item.type)" />
                      </el-icon>
                      <div class="outline-item-info">
                        <div class="outline-item-label">{{ item.label }}</div>
                        <div class="outline-item-field">{{ item.field }}</div>
                      </div>
                      <div class="outline-item-type">
                        {{ getComponentTypeName(item.type) }}
                      </div>
                    </div>
                    <div class="outline-item-actions">
                      <el-button
                        size="small"
                        text
                        :icon="markRaw(DocumentCopy)"
                        @click.stop="$emit('copyItem', index)"
                      />
                      <el-button
                        size="small"
                        text
                        type="danger"
                        :icon="markRaw(Delete)"
                        @click.stop="$emit('deleteItem', index)"
                      />
                    </div>
                  </div>

                  <!-- 栅格布局的子组件 -->
                  <div class="outline-grid-children">
                    <template
                      v-for="(column, colIndex) in item.columns"
                      :key="colIndex"
                    >
                      <div
                        v-if="column.children && column.children.length > 0"
                        class="outline-column"
                      >
                        <div class="outline-column-header">
                          {{ t('formDesigner.componentPanel.column') }} {{ colIndex + 1 }} ({{ column.span }}/24)
                        </div>
                        <div
                          v-for="(child, childIndex) in column.children"
                          :key="child.key"
                          class="outline-item outline-child-item"
                          :class="{
                            active:
                              selectedIndex ===
                              `${index}-${colIndex}-${childIndex}`,
                          }"
                          @click="
                            $emit(
                              'selectItem',
                              `${index}-${colIndex}-${childIndex}`
                            )
                          "
                        >
                          <div class="outline-item-content">
                            <el-icon class="outline-item-icon">
                              <component :is="getComponentIcon(child.type)" />
                            </el-icon>
                            <div class="outline-item-info">
                              <div class="outline-item-label">
                                {{ child.label }}
                              </div>
                              <div class="outline-item-field">
                                {{ child.field }}
                              </div>
                            </div>
                            <div class="outline-item-type">
                              {{ getComponentTypeName(child.type) }}
                            </div>
                          </div>
                          <div class="outline-item-actions">
                            <el-button
                              size="small"
                              text
                              type="danger"
                              :icon="markRaw(Delete)"
                              @click.stop="
                                $emit(
                                  'deleteGridChild',
                                  index,
                                  colIndex,
                                  childIndex
                                )
                              "
                            />
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, markRaw, computed } from "vue";
import { useI18n } from "vue-i18n";
import {
  Edit,
  Calendar,
  Clock,
  Select,
  Switch,
  Document,
  List,
  CircleCheck,
  Plus,
  DocumentCopy,
  Delete,
  Grid,
  Operation,
  Folder,
  Collection,
  Histogram,
  Menu,
} from "@element-plus/icons-vue";

// 国际化
const { t } = useI18n();

// Props
defineProps({
  formItems: {
    type: Array,
    default: () => [],
  },
  selectedIndex: {
    type: [Number, String],
    default: -1,
  },
});

// Emits
defineEmits(["selectItem", "copyItem", "deleteItem", "deleteGridChild"]);

// 侧边栏tab
const sidebarActiveTab = ref("components");

// 基础组件列表
const basicComponents = computed(() => [
  { type: "input", label: t('formDesigner.componentPanel.componentTypes.input'), icon: markRaw(Edit) },
  { type: "number", label: t('formDesigner.componentPanel.componentTypes.number'), icon: markRaw(Plus) },
  { type: "textarea", label: t('formDesigner.componentPanel.componentTypes.textarea'), icon: markRaw(Document) },
  { type: "select", label: t('formDesigner.componentPanel.componentTypes.select'), icon: markRaw(Select) },
  { type: "radio", label: t('formDesigner.componentPanel.componentTypes.radio'), icon: markRaw(CircleCheck) },
  { type: "checkbox", label: t('formDesigner.componentPanel.componentTypes.checkbox'), icon: markRaw(List) },
  { type: "date", label: t('formDesigner.componentPanel.componentTypes.date'), icon: markRaw(Calendar) },
  { type: "time", label: t('formDesigner.componentPanel.componentTypes.time'), icon: markRaw(Clock) },
  { type: "switch", label: t('formDesigner.componentPanel.componentTypes.switch'), icon: markRaw(Switch) },
  { type: "slider", label: t('formDesigner.componentPanel.componentTypes.slider'), icon: markRaw(Histogram) },
  { type: "treeselect", label: t('formDesigner.componentPanel.componentTypes.treeselect'), icon: markRaw(Folder) },
  { type: "cascader", label: t('formDesigner.componentPanel.componentTypes.cascader'), icon: markRaw(Collection) },
]);

// 内容展示组件列表
const showComponents = computed(() => [
  { type: "tree", label: t('formDesigner.componentPanel.componentTypes.tree'), icon: markRaw(Operation) },
  { type: "descriptions", label: t('formDesigner.componentPanel.componentTypes.descriptions'), icon: markRaw(Menu) },
]);

// 布局组件列表
const layoutComponents = computed(() => [
  { type: "grid", label: t('formDesigner.componentPanel.componentTypes.grid'), icon: markRaw(Grid) },
]);

// 拖拽开始
const handleDragStart = (event, component) => {
  event.dataTransfer.setData("component", JSON.stringify(component));
};

// 获取组件图标
const getComponentIcon = (type) => {
  const iconMap = {
    input: markRaw(Edit),
    number: markRaw(Plus),
    textarea: markRaw(Document),
    select: markRaw(Select),
    cascader: markRaw(Collection),
    radio: markRaw(CircleCheck),
    checkbox: markRaw(List),
    date: markRaw(Calendar),
    time: markRaw(Clock),
    switch: markRaw(Switch),
    slider: markRaw(Histogram),
    grid: markRaw(Grid),
    tree: markRaw(Operation),
    treeselect: markRaw(Folder),
    descriptions: markRaw(Menu),
  };
  return iconMap[type] || markRaw(Edit);
};

// 获取组件类型名称
const getComponentTypeName = (type) => {
  const key = `formDesigner.componentPanel.componentTypeNames.${type}`;
  const translated = t(key);
  // 如果翻译不存在，返回未知组件
  return translated !== key ? translated : t('formDesigner.componentPanel.unknownComponent');
};
</script>

<style lang="less" scoped>
.designer-sidebar {
  width: 250px;
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color-lighter);
  overflow-y: auto;
}

.component-panel {
  padding-top: 9px;
  height: 100%;

  .sidebar-tabs {
    height: 100%;

    :deep(.el-tabs__header) {
      margin: 0;
      padding: 0 16px;
      background: var(--el-bg-color);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

    :deep(.el-tabs__content) {
      padding: 16px;
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }
}

.component-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.component-category {
  .category-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
}

.component-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.component-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
  background: var(--el-bg-color);

  &:hover {
    border-color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
  }

  &:active {
    cursor: grabbing;
  }

  span {
    margin-top: 4px;
    font-size: 12px;
    color: var(--el-text-color-regular);
  }
}

.todo-components {
  padding: 8px 12px;
  background-color: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-extra-light);
  border-radius: 6px;
  margin-top: 8px;
}

.todo-title {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
  font-style: italic;
  font-weight: 500;
}

.todo-content {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
  line-height: 1.4;
  margin-top: 2px;
}

// 大纲面板样式
.outline-panel {
  height: 100%;
}

.outline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.outline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outline-grid-container {
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  overflow: hidden;
}

.outline-grid-item {
  border-bottom: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-lighter);
}

.outline-grid-children {
  padding: 8px 0;
}

.outline-column {
  margin-bottom: 8px;

  &:last-child {
    margin-bottom: 0;
  }
}

.outline-column-header {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-weight: 500;
}

.outline-child-item {
  margin-left: 16px;
  margin-right: 8px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  margin-bottom: 4px;

  &:last-child {
    margin-bottom: 0;
  }

  .outline-item-content {
    padding-left: 8px;
  }
}

.outline-item {
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--el-bg-color);

  &:hover {
    border-color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--el-box-shadow-light);
  }

  &.active {
    border-color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
  }
}

.outline-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.outline-item-icon {
  color: var(--el-color-primary);
  font-size: 16px;
}

.outline-item-info {
  flex: 1;
  min-width: 0;
}

.outline-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-item-field {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-item-type {
  font-size: 12px;
  color: var(--el-color-success);
  background: var(--el-color-success-light-9);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--el-color-success-light-7);
}

.outline-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.outline-item:hover .outline-item-actions {
  opacity: 1;
}
</style>
